/* 顶部背景图片样式 */
.bgimage {
	width: 100%;
	height: 360rpx;
	background: url("http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/shop/shopback.jpg");
	background-size: cover;
}

/* '背景模块样式' */
.shopback {
	background-color: #eff7ff;
	width: 100%;
	border-radius: 60rpx 60rpx 0 0;
	margin-bottom: -50rpx;
}
	.swiper{
			
		}
	.shop-top{
		width: 100%;
		height: 360rpx;
		padding:30rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: -20rpx;
		overflow: hidden;/* 确保内容不会溢出 */
		/* white-space: nowrap; *//* 确保元素在一行内显示 */
		position: relative;
		display: flex;
		justify-content: space-around;
	}
		.shop-con{
			display: inline-block; /* 使商品项水平排列 */
			/* margin: 10rpx; */ /* 设置商品项之间的间隔 */ 
			transition:0.5s ease-in-out;/* 平滑过渡效果 */
			box-sizing: border-box;
			padding: 10rpx;
			width: 28%;
			height: 330rpx;
			background-color: #ffffff;
		}
			.shop-pic{
				box-sizing: border-box;
				margin: 5rpx;
				padding: 10rpx;
				height: 170rpx;
				width: 170rpx;
				background-size: cover;
			}
			.shop-text{
				box-sizing: border-box;
				margin: 5rpx 8rpx;
				height: 60rpx;
				color: #000;
				font-size: 24rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;/* 将文本垂直排列 */
				-webkit-line-clamp: 2;/* 显示两行 */
				overflow: hidden;/* 超出隐藏 */
				text-overflow: ellipsis;/* 省略号代替 */
			}
			.shop-pri{
				margin: 10rpx 6rpx;
				color: #ff5500;
				font-weight: bold;
				font-size: 24rpx;
			}
			.list-title{
				background-color: #fff;
				box-sizing: border-box;
				margin: 20rpx 2rpx 5rpx 2rpx;
				white-space: nowrap;
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 70rpx;
				/*width: 780rpx;/* 指定可滑动区域宽度
				overflow: hidden;/* 超出隐藏
				white-space: nowrap;/* 超出不换行
				overflow-x: auto;/* 出现水平滚动条 */
			}
			
				.title-name{
					display: inline-block;
					margin: 6rpx 20rpx;
					padding: 20rpx;
					height: 50rpx;
					box-sizing: border-box;
				}
				
				.type{
					text-align: center;
					justify-content: space-around;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 26rpx;
				}	
				.active{
					border-bottom: 1rpx solid #0088ff;
					color: #0088ff;
				}
				
	.goods-list{
			margin: 15rpx;
		}
		.goods-con{
			display: flex;
			box-sizing: border-box;
			background-color: #fff;
			margin:20rpx;
			padding-bottom: 10rpx;
			height: 230rpx;
			border-radius: 10rpx;
		}
			.goods-pic{
				margin: 20rpx;
				height: 170rpx;
				width: 25%;
				background-size: cover;
			}
			.goods-info{
				width: 65%;
				margin: 10rpx;
				box-sizing: border-box;
				padding-top: 10rpx;
			}
			
				.goods1{
					display: flex;
					box-sizing: border-box;
					margin: 5rpx;
					padding: 5rpx;
					font-weight: bold;
					font-size: 36rpx;
				}
				.goods2{
					/* 文字两行后省略 */
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;/* 文本垂直排列 */
					color: #717171;
					word-break: break-all;
					padding:6rpx;
					box-sizing: border-box;
					font-size: 28rpx;
				}
				.goods3{
					display: flex;
					color: #717171;
					padding:5rpx;
					font-size: 28rpx;
					height: 66rpx;
					box-sizing: border-box;
					justify-content: space-between;
					align-items: center;
				}
					.goods-money{
						padding: 2rpx;
						margin: 2rpx;
						color: #ff5500;
						font-weight: bold;
					}
					.goods-buy{
						padding: 10rpx 42rpx;
						background-color: #0055ff;
						color: #fff;
						font-size: 24rpx;
						border-radius: 50rpx;
						text-align: center;
						box-sizing: border-box;
					}